<template>
  <div id="container" ref="container">

  </div>
</template>

<script setup lang="ts">
import { ESGeoPolygon } from 'earthsdk2s';
import { nextTick, ref } from 'vue';
import { getobjm } from '../scripts/getobjm';
const objm = getobjm();
const container = ref<HTMLDivElement>()

// console.log('ESViewer.context.registerViewers', ESViewer.context.registerViewers);
// console.log('EngineObject.context.registerEngines', EngineObject.context.registerEngines);

nextTick(() => {
  if (!container.value) return;

  // const opt = {
  //   container: container.value,
  //   type: 'ESUeViewer',
  //   options: { ws: 'http://192.168.0.20:80', esmsg: 'http://192.168.0.20:80' }
  // } as UeVOption;
  // const viewer = objm.createUeViewer(opt) as ESUeViewer;
  // viewer.debug = true;
  // viewer.statusUpdateInterval = 0;
  // console.log('ESUeViewer', viewer);

  const viewer = objm.createCesiumViewer(container.value)
  console.log('ESCesiumViewer', viewer);
  console.log('objm', objm);


  setTimeout(() => {
    const sceneobject = objm.createSceneObjectFromClass(ESGeoPolygon);
    sceneobject.points = [[-108.0, 25.0, 100000], [-100.0, 25.0, 100000], [-100.0, 30.0, 100000], [-108.0, 30.0, 300000]];
    sceneobject.stroked = true;
    sceneobject.strokeStyle = {
      width: 2,
      widthType: 'screen',
      color: [1, 0, 0, 1],
      material: '',
      materialParams: {}
    }
    console.log('ESGeoPolygon', sceneobject);
  }, 2000)

})

// nextTick(() => {
//   if (!container.value) return;
//   const opt = { container: container.value, ws: 'http://192.168.0.20:80', esmsg: 'http://192.168.0.20:80' };
//   const viewer = objm.createUeViewer(opt) as unknown as ESUeViewer;
//   viewer.debug = true;
//   viewer.statusUpdateInterval = 0;
//   //@ts-ignore
//   window.g_viewer = viewer;

//   console.log('ESUeViewer', viewer);
// })




</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
  background-color: #64927370;
}
</style>
